<template>
	<div
		class="switch"
		:class="{ 'is-disabled': switchDisabled, 'is-checked': checked }"
		@click.prevent="switchValue"
	>
		<input
			type="checkbox"
			class="switch__input"
			ref="input"
			:true-value="activeValue"
			:false-value="inactiveValue"
			@change="handleChange"
		/>
		<span class="switch__core" ref="core" :style="{ width: coreWidth + 'px' }"></span>
	</div>
</template>

<script>
export default {
	name: 'customSwitch',
	props: {
		name: {
			type: String,
			default: '', // input name
		},
		value: {
			type: [Boolean, String, Number],
			default: false, // 默认值
		},
		disabled: {
			type: Boolean,
			default: false, // 是否可点击
		},
		activeValue: {
			type: [Boolean, String, Number],
			default: true, // 选中值
		},
		inactiveValue: {
			type: [Boolean, String, Number],
			default: false, // 未选中值
		},
		width: {
			type: Number,
			default: 40, // 默认宽度
		},
		activeColor: {
			type: String,
			default: '#13ce66', // 默认选中背景色
		},
		inactiveColor: {
			type: String,
			default: '#ff4949', // 默认未选中背景色
		},
	},
	data() {
		return {
			coreWidth: this.width,
		};
	},
	watch: {
		checked() {
			this.changeSwitchStyle();
		},
	},
	computed: {
		checked() {
			return this.value === this.activeValue;
		},
		switchDisabled() {
			return this.disabled;
		},
	},
	mounted() {
		this.changeSwitchStyle();
	},
	methods: {
		changeSwitchStyle() {
			this.$refs.input.checked = this.checked; // 改变input状态
			if (this.activeColor || this.inactiveColor) {
				this.setBackgroundColor(); // 设置switch样式
			}
		},
		handleChange() {
			const val = this.checked ? this.inactiveValue : this.activeValue;
			this.$emit('input', val);
			this.$nextTick(() => {
				if (this.$refs.input) {
					this.$refs.input.checked = this.checked;
				}
			});
		},
		setBackgroundColor() {
			let newColor = this.checked ? this.activeColor : this.inactiveColor;
			this.$refs.core.style.borderColor = newColor;
			this.$refs.core.style.backgroundColor = newColor;
		},
		switchValue() {
			!this.switchDisabled && this.handleChange();
		},
	},
};
</script>

<style scoped lang="scss">
input {
	cursor: pointer;
}

.switch {
	display: inline-flex;
	align-items: center;
	position: relative;
	font-size: 14px;
	line-height: 20px;
	height: 20px;
	vertical-align: middle;
}
.switch.is-disabled {
	opacity: 0.6;
}
.switch__input {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
	margin: 0;
}
.switch__core {
	margin: 0;
	display: inline-block;
	position: relative;
	width: 40px;
	height: 20px;
	border: 1px solid #dcdfe6;
	outline: none;
	border-radius: 10px;
	box-sizing: border-box;
	background: #dcdfe6;
	cursor: pointer;
	transition: border-color 0.3s, background-color 0.3s;
	vertical-align: middle;
}
.switch__core:after {
	content: '';
	position: absolute;
	top: 1px;
	left: 1px;
	border-radius: 100%;
	transition: all 0.3s;
	width: 16px;
	height: 16px;
	background-color: #fff;
}
.switch.is-checked .switch__core:after {
	left: 100%;
	margin-left: -17px;
}
.switch.is-disabled .el-switch__core {
	cursor: not-allowed;
}
</style>
